<script setup>
import {ref} from "vue";

import ContestDetail from "@/components/components/resDetail.vue";
import router from "@/router";
const list = ref(['c1', 'c2', 'c3', 'c4', 'c5', 'c6']);
</script>

<template>
<body class="main">
  <div class="left" >
    <div class="inner" v-for="(item, index) in list" :key="index">
      <contest-detail class="cd" :msg="item" @click="router.push('/detail')"></contest-detail>
    </div>
  </div>
  <div class="right">
<!--    <pay-attention class="pa"></pay-attention>-->
<!--    <user-information class="uI" :name="'Fish'"></user-information>-->
<!--    <top-rated class="tr"></top-rated>-->
  </div>
</body>
</template>

<style scoped>
.main{
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  background-color: #22272E;
  .left{
    width: 70%;
    height: 100%;
    margin-right: 1rem;
    margin-left: 1rem;
    display: flow;
  }

  .right{
    margin-top: 1rem;
    width: 30%;
    height: 100%;

    .uI{
      margin-top: 1rem;
    }

    .tr{
      margin-top: 1rem;
    }
  }
}
.inner{
  padding: 2%;
  margin-top: 1%;
  border-radius: 10px;
  &:hover{
    background-color: #2D333B;
    transition: 0.5s;
  }
}
</style>